<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>填写订单</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		/*img{
			width: 100%;
		}*/
		i{
			font-style: normal;
		}
		body{
			background: #f7f7f8;
		}
		.gonggong{
			margin-bottom: 10px;
			background: white;
			border-radius: 3px;
		}
		.main{
			padding: 12px 11px 80px;
		}
		.dingbu{
			display: flex;
			align-items: center;
			padding: 15px 0 15px 11px;
		}
		.dwei img{
			margin-right: 10px;
			width: 30px;
			height: 30px;
		}
		.xxi{
			flex: 1;
		}
		.xxi div{
			display: flex;
			align-items: center;
		}
		.xxi div p{
			margin: 0px;
		}
		.xxi div h5{
			font-size: 15px;
			margin: 0px;
			width: 55px;
		}
		div:nth-child(2) .xxi{
			margin-top: 5px;
			font-size: 12px;
		} 
		.xzhe img{
			width: 44px;
			height: 44px;
		}
		.play{
			position: fixed;
			bottom: 0;
			left: 0;
			
			padding:0 11px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 80px;
			box-sizing: border-box;
			background: white;
			border-top: 1px solid #ededed;
		}
		.left1{
			font-size: 12px;
		}
		.left1 span{
			color: red;
		}
		.left1 i{
			font-size: 20px;
		}
		.right1 a{
			text-decoration: none;
			text-align: center;
			line-height: 35px;
			color: #FFFFFF;
			font-size: 13px;
			width: 90px;
			height: 35px;
			display: block;
			border-radius: 3px;
			background-image:linear-gradient(90deg,#6fc2aa 5%,#54b196 100%) ;
		}
		.shangpin{
			display: flex;
			padding: 11px 0 11px 11px;
		}
		.tup{
			margin-right: 10px;
		}
		.tup img{
			width: 85px;
			height:85px;
		}
		.shangpin .cpin{
			flex: 1;
			margin: 0;
		}
		
		.cpin p{
			width: 95px;
			height: 20px;
			font-size: 12px;
			background: #F7F7F8;
		}
		.cpin p span:first-child{
			margin-right: 5px;
		}
		.jiage span:last-child i{
			text-decoration: line-through;
		}
		.jiage span{
			margin-right: 5px;
			color: #999;
			font-size: 12px;
		}
		.jiage i{
			color: #999;
			font-size: 12px;
		}
		.jiage span:first-child{
			color: red;
		}
		.jiage span:first-child i{
			font-size: 16px;
			color: red;
		}
		.sliang{
			width: 44px;
			height: 44px;
/*			background: pink;*/
			text-align: center;
			line-height: 44px;
		}
		.qita,.qita1{
			padding: 15px;
		}
		.qita div,.qita1 div{
			margin-bottom: 30px;
			display: flex;
		}
		.qita div:nth-child(2n-1){
			justify-content: space-between;
		}
		.qita1 div:nth-child(n){
			justify-content: space-between;
		}
		
		.qita div:nth-child(2) h5{
			margin-right: 20px;
		}
		.qita div:nth-child(2) p{
			font-size: 12px;
			color: #989898;
		}
		.qita div:nth-child(3){
			margin-bottom: 0px;
		}
		.qita1 div:nth-child(3){
			margin-bottom: 0px;
		}
		.qita div:nth-child(3) a{
			text-decoration: none;
		}
		.qita1 div:nth-child(3) p{
			color: red;
		}
		.qita h5 ,.qita p,.qita1 h5,.qita1 p{
			font-size: 13px;
			color: #262626;
			font-weight: 400;
		}
	</style>
</head>
<body>
	<!--滑动内容-->
	<div class="main">
		<!--顶部信息-->
		<div class="gonggong dingbu">
			<div class="dwei"><img src="img/dingwei.jpg" alt="" /></div>
			<div class="xxi">
				<div><h5>林丽</h5><p>18937334290</p></div>
				<div>河南省郑州市新郑市郑州西亚斯学院</div>
			</div>
			<div class="xzhe"><img src="img/right.jpg" alt="" /></div>
		</div>
		<!--中间商品-->
		<div class="gonggong shangpin">
			<div class="tup"><a href="#"><img src="img/ali.jpg"/></a></div>
			<div class="cpin">
				
				<h5>康尔贝 非接触式红外体温计  领卷立减30元  婴儿级材质 测温....</h5>
				<p><span>粉色</span> <span>红外体温计</span></p>
				
				<div class="jiage">
					<span>￥<i>266</i></span>
					<span>￥<i>299</i></span>
				</div>
				
			</div>
			<div class="sliang">x<span>1</span></div>
		</div>
		<!--其他区域-->
		<div class="gonggong qita">
			<div>
				<h5>配送方式</h5>
				<p>顺丰快递</p>
			</div>
			<div>
				<h5>买家备注</h5>
				<p>不要辣，多加香菜，不要葱花</p>
			</div>
			<div>
				<h5>支付方式</h5>
				<p><a href="#">支付宝 ></a></p>
			</div>
		</div>
		<!--信息-->
			<div class="gonggong qita1">
			<div>
				<h5>商品总价</h5>
				<p>￥299.00</p>
			</div>
			<div>
				<h5>运费</h5>
				<p>￥0.00</p>
			</div>
			<div>
				<h5>折扣</h5>
				<p>-￥30.00</p>
			</div>
		</div>
	</div>
	<!--底部定位支付-->
	<div class="play">
		<div class="left1">合计：<span>￥<i>266.00</i></span></div>
		<div class="right1"><a href="#">去支付</a></div>
	</div>
</body>
</html>
